<script setup>
import topNav from "../../components/topNav.vue";
import { onMounted, reactive, ref, getCurrentInstance, computed } from "vue";
import { onLoad, onReachBottom, onShow } from "@dcloudio/uni-app";
// import { PurchaseDet, PurchaseCancel } from "@/services/delivery";
import {
  PlanDetail,
  PlanStatus,
  PlanCancel,
  PlanReceive,
} from "@/services/requiregoods.js";

const id = ref("");
const detailData = ref({});
const listTabs = ref([]);

onLoad((e) => {
  id.value = e.id;
  getPurchaseCountObj();
});

const getPurchaseCountObj = async () => {
  try {
    let res = await PlanStatus();
    listTabs.value = [];
    listTabs.value.push({
      name: "全部",
      available: 0,
    });

    for (let key in res.data) {
      console.log(key, res.data[key]);

      listTabs.value.push({
        name: res.data[key],
        available: key,
      });
    }
    getPurchaseDet();
  } catch (e) {}
};
const selectStatus = (num, list) => {
  let arr = list.filter((item) => {
    return item.available == num;
  });
  return arr[0] && arr[0].name;
};

const getPurchaseDet = async (index) => {
  try {
    let res = await PlanDetail({ id: id.value });
    if (res.code == 200) {
      detailData.value = res.data;
    } else {
    }

    console.log(res);
  } catch (e) {}
};

const sandfun = () => {
  uni.navigateTo({
    url: "/pages/sends/list/index",
  });
  uni.navigateTo({
    url: "/pages/sends/list/index?id=" + id.value,
  });
};
const showLen = ref(3);

const showLenFun = () => {
  console.log(showLen.value);
  if (showLen.value > 3) {
    showLen.value = 3;
  } else {
    showLen.value = detailData.value.details.length;
  }
};

const callPhone = (phone) => {
  uni.makePhoneCall({
    phoneNumber: phone,
  });
};

const cancelFun = async () => {
  uni.showModal({
    title: "提示",
    content: "确定取消该要货计划吗？",
    success: async (res) => {
      if (res.confirm) {
        console.log("用户点击确定");
        const res = await PlanCancel({ id: id.value });
        if (res.code == 200) {
          uni.showToast({
            title: "取消成功",
            icon: "none",
          });
          uni.navigateBack();
        }
      } else if (res.cancel) {
        console.log("用户点击取消");
      }
    },
  });
};

const upFun = () => {
  uni.navigateTo({
    url: "/pages/require_goods/goods_sel/index?id=" + id.value,
  });
};
const takeFun = (item) => {
  uni.navigateTo({
    url: "/pages/sends/listsends/index",
  });
  // uni.showModal({
  //   title: "提示",
  //   content: "请检测货物数量是否正确，是否确定收货？",
  //   success: async (res) => {
  //     if (res.confirm) {
  //       console.log("用户点击确定");
  //       const res = await PlanReceive({ id: id.value });
  //       if (res.code == 200) {
  //         uni.showToast({
  //           title: "确认收货成功",
  //           icon: "none",
  //         });
  //         uni.navigateBack();
  //       }
  //     } else if (res.cancel) {
  //       console.log("用户点击取消");
  //     }
  //   },
  // });
};
</script>

<template>
  <topNav
    title="要货单详情"
    @search="searchFun"
    @scan="scanFun"
    rType="save"
    :clickable="false"
  ></topNav>

  <view class="goods_state" v-if="type != 'add'">
    <view class="goods_state-left">
      <image src="@/static/goods/order_2.gif" mode="scaleToFill" />
    </view>
    <view class="goods_state-right">
      <text>{{ selectStatus(detailData.status, listTabs) }} </text>
      <view
        ><text>{{ detailData.status == 3 ? "采购中" : "" }} </text>
      </view>
    </view>
  </view>
  <view class="ps_k">
    <view class="ps_address">配送地址:{{ detailData.scName }}</view>
    <view class="ps_date">期望送达日期：{{ detailData.expectDate }}</view>
  </view>

  <view class="content">
    <view class="top">
      <up-copy :content="detailData.code">
        <view class="item_title_left">
          <text>单据号：{{ detailData.code }}</text>
          <image src="@/static/images/copy.png" mode="scaleToFill" />
        </view>
      </up-copy>
    </view>
    <view class="list">
      <view
        class="list_item"
        v-for="(item, index) in detailData.details"
        :key="index"
      >
        <view v-if="index < showLen" class="list_item_k">
          <view class="item_title_left">
            <!-- <view class="ts notice" v-if="item.isStandard == 0">非标品</view>
            <view class="ts notice-no" v-if="item.isStandard == 1">标品</view> -->
            <image
              :src="
                item.productImage ||
                'https://cloud-erp.yibaitao.cn/0d2f4178-7754-4686-9213-b174f745258b.png'
              "
              mode="scaleToFill"
            />
            <view class="info">
              <view class="info_title"
                ><text class="name">{{ item.productName }}</text>
                <view
                  ><text>x</text> {{ item.orderNum
                  }}{{ item.productUnit }}</view
                ></view
              >
              <view class="info_dec">{{ item.barCode }} </view>
              <view class="info_dec" v-if="item.productSpec"
                >商品规格: {{ item.productSpec }}
              </view>
              <view class="info_price" :class="item.taxPrice ? '' : 'no'"
                >{{ item.taxPrice ? "¥" + item.taxPrice : "暂无报价" }}
              </view>

              <!-- <view class="des-of" @click="goSHDet()">查看收货单</view> -->
            </view>
          </view>
          <view class="cg" v-if="item.purchaseCode || item.receiveCode">
            <view class="item" v-if="item.purchaseCode">
              <up-copy :content="item.purchaseCode">
                <view class="item_title_copy">
                  <text>采购单编号：</text>
                  <view class="code-icon"
                    >{{ item.purchaseCode }}
                    <image src="@/static/images/copy.png" mode="scaleToFill"
                  /></view>
                </view> </up-copy
            ></view>
            <view class="item" v-if="item.receiveCode">
              <up-copy :content="item.receiveCode">
                <view class="item_title_copy">
                  <text>收货单编号：</text>
                  <view class="code-icon"
                    >{{ item.receiveCode }}
                    <image src="@/static/images/copy.png" mode="scaleToFill"
                  /></view>
                </view> </up-copy
            ></view>
          </view>
        </view>
      </view>
    </view>
    <view class="more">
      <text
        class="more-text"
        @click="showLenFun"
        v-if="
          showLen <= 3 && (detailData.details && detailData.details.length) > 3
        "
      >
        还有{{
          (detailData.details && detailData.details.length) - showLen
        }}种商品
      </text>
      <up-icon
        v-if="
          showLen <= 3 && (detailData.details && detailData.details.length) > 3
        "
        class="arrow-right-double"
        name="arrow-right-double"
        size="24rpx"
        color="#999999"
      />
      <text class="more-text" @click="showLenFun" v-if="showLen > 3">
        关闭展开
      </text>
      <up-icon
        v-if="showLen > 3"
        class="arrow-right-double2"
        name="arrow-right-double"
        size="24rpx"
        color="#999999"
      />
    </view>
    <view class="pay_order">
      <text>下单总数</text>
      <text>{{ detailData.totalNum }}件</text>
    </view>
    <!-- <view class="pay_order">
      <text>下单总额</text>
      <text>¥{{ detailData.totalAmount }}</text>
    </view> -->
    <!-- 
    <view class="pay_num">
      实收： <text>¥{{ detailData.totalAmount }}</text>
    </view> -->
  </view>

  <!-- <view class="goods-psLis">
    <view
      class="goods-psLis-item"
      v-for="(item, index) in detailData.products"
      :key="index"
    >
      <view class="goods-psLis-item-left">
        <view class="ts notice" v-if="item.isStandard == 0">非标品</view>
        <view class="ts notice-no" v-if="item.isStandard == 1">标品</view>
        <image :src="item.image" mode="scaleToFill" />
      </view>

      <view class="goods-psLis-right">
        <view class="info">
          <text>{{ item.productName }}</text>
          <view>已接收：{{ item.receiveNum }}</view>
        </view>
        <view class="info-num"
          ><text>x</text> {{ item.orderNum }}{{ item.unit }}</view
        >
      </view>
    </view>
  </view> -->

  <view class="order_info">
    <view class="order_info_top">要货信息</view>
    <view class="order_item">
      <text>创建时间</text>
      <text>{{ detailData.createTime }}</text>
    </view>
    <view class="order_item">
      <text>创建人</text>
      <text>{{ detailData.createBy }}</text>
    </view>
    <view class="order_item">
      <text>备注</text>
      <text>{{ detailData.description || "--" }}</text>
    </view>
    <!-- <view class="order_item">
      <text>创建人</text>
      <text>{{ detailData.createBy }}</text>
    </view> -->
    <!-- <view class="order_item">
      <text>期望到货日期</text>
      <text>{{ detailData.expectArriveDate }}</text>
    </view> -->
    <!-- <view class="order_item">
      <text>结算方式</text>
      <text>售出结算</text>
    </view> -->
  </view>
  <view style="width: 100%; height: 150rpx"></view>

  <view
    class="goods_bt"
    v-if="detailData.status == 3 || detailData.status == 8"
  >
    <view class="goods_bt_to">
      <view
        v-permission="['shop:requisition:plan:cancel']"
        class="bt_fh bt_qx"
        v-if="detailData.status == 3"
        @click.stop="cancelFun"
        >取消</view
      >
      <view
        v-permission="['shop:requisition:plan:update']"
        class="bt_fh bt_qr"
        @click.stop="upFun"
        v-if="detailData.status == 3"
        >编辑</view
      >
      <view
        v-permission="['shop:requisition:plan:receive']"
        class="bt_fh bt_qr"
        @click.stop="takeFun"
        v-if="detailData.status == 8"
        >去收货</view
      >
      <view
        class="bt_fh bt_qr"
        v-if="detailData.status == 9"
        @click.stop="sandfun(item)"
        >查看收货</view
      >
    </view>
  </view>
</template>

<style lang="scss" scoped>
@import "./index.scss";
</style>
